<template>
  <div>
    <v-card
        outlined
        class="ma-5 control-block"
        v-loading="keyword_loading"
        >
        <v-card-title>添加订阅关键词</v-card-title>
        <v-card-text>
          <div>
            <v-chip
                class="ma-2"
                close
                v-for="(tag, index) in subscription"
                :key="index"
                @click:close="()=>console.log('remove', index)"
                >
                {{ tag }}
            </v-chip>
          </div>
          <div class="new-subscription-form">
            <v-text-field
                label="输入关键词"
                v-model="subscription_keyword"
                ></v-text-field>

            <v-btn
                :disabled="!subscription_keyword"
                color="success"
                class="mr-4"
                @click="()=>console.log('sub')"
                >
                订阅
            </v-btn>
          </div>
        </v-card-text>
    </v-card>

    <v-card id="personal-card" v-loading="is_loading">
      <v-col class="paperCard"
             v-for="(paper, index) in items"
             :key="'cl_'+index">
        <PaperCard :paper="paper" :key="'pc_'+index">
        </PaperCard>
      </v-col>
    </v-card>
  </div>
</template>

<script>
import PaperCard from "@/components/PaperCard";

export default {
  components: {
    PaperCard
  },
  data() {
    return {
      items: [],
      subscription: [],
      subscription_keyword: "",
      is_loading: false,
      keyword_loading: false
    }
  },
  mounted() {
    this.is_loading = true
    this.$api.personal.getActivities()
      .then(data => this.items = data)
      .catch(error => this.$notify({
        message: error.api_detail || error,
        title: "API error"
      }))
      .finally(() => this.is_loading = false)

    this.keyword_loading = true
    this.$api.personal.getSubscriptions()
      .then(data => this.subscription = data)
      .catch(error => this.$notify({
        message: error.api_detail || error,
        title: "API error"
      }))
      .finally(() => this.keyword_loading = false)
  }
}
</script>

<style lang="sass" scoped>
.paperCard
    width: 100%

.new-subscription-form
    width: 50%
    display: inline-flex
</style>

